<template>
  <div>
    <!--第一行-->
    <el-row>
      <el-col :span="6">
        <div>
          <el-statistic title="负责楼栋">
            <template slot="prefix">
              <i class="el-icon-louzuo statistic-icon"></i>
            </template>
            <template slot="formatter">
              <span class="statistic-text">{{ buildingName }}</span>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic title="负责房屋数" :value="housesCount">
            <template slot="formatter">
              <span class="statistic-text">{{ housesCount }}</span>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic :value="inspectorTotalCount" title="我的检查次数">
            <template slot="prefix">
              <i class="el-icon-s-flag statistic-icon" style="color: red"></i>
            </template>
            <template slot="formatter">
              <span class="statistic-text">{{ inspectorTotalCount }}</span>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic title="本月检查次数" :value="thisMonthCount">
            <template slot="formatter">
              <span class="statistic-text">{{ thisMonthCount }}</span>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <!--第二行-->
    <el-row :gutter="10" class="rows">
      <el-col :span="12" class="cols">
        <!-- 本月各房屋检查次数柱状图-->
        <div id="count" style="width: 100%; height: 300px;"></div>
      </el-col>
      <el-col :span="12" class="cols">
        <!-- 各房屋分数柱形图-->
        <div id="score" style="width: 100%; height: 300px;"></div>
      </el-col>
    </el-row>
    <!--第三行-->
    <el-row :gutter="10" class="rows">
      <el-col :span="12" class="cols">
        <!--平均分随检查折线图-->
        <div id="avgScoreTime" style="width: 100%; height: 300px;"></div>
      </el-col>
      <el-col :span="12" class="cols">
        <!-- 检查频率与平均分关系-->
        <div id="avgScoreFrequency" style="width: 100%; height: 300px;"></div>
        <!--        <div style="">-->
        <!--          -->
        <!--        </div>-->
        <div style="padding: 1rem 1rem 2rem;" v-if="pearson<0.3">
          <span style="color: #409eff">每月检查次数</span>和
          <span style="color: #409eff">每月房屋平均分</span>之间的Pearson相关系数值为
          <span style="color: #409eff">{{ this.pearson.toFixed(5) }}</span>，绝对值小于0.3，
          因而说明<span style="color: #409eff">每月检查次数</span>和
          <span style="color: #409eff">每月房屋平均分</span>之间几乎没有相关关系。
        </div>
        <div style="padding: 1rem 1rem 2rem;" v-else-if="pearson<0.7">
          <span style="color: #409eff">每月检查次数</span>和
          <span style="color: #409eff">每月房屋平均分</span>之间的Pearson相关系数值为
          <span style="color: #409eff">{{ this.pearson.toFixed(5) }}</span>，绝对值不小于0.3，小于0.7，
          因而说明<span style="color: #409eff">每月检查次数</span>和
          <span style="color: #409eff">每月房屋平均分</span>之间中度相关。拟合方程为
          <div style="text-align: center">{{ line }}</div>
        </div>
        <div style="padding: 1rem 1rem 2rem;" v-else>
          <span style="color: #409eff">每月检查次数</span>和
          <span style="color: #409eff">每月房屋平均分</span>之间的Pearson相关系数值为
          <span style="color: #409eff">{{ this.pearson.toFixed(5) }}</span>，绝对值大于0.7，
          因而说明<span style="color: #409eff">每月检查次数</span>和
          <span style="color: #409eff">每月房屋平均分</span>之间高度相关。拟合方程为
          <div style="text-align: center">{{ line }}</div>
        </div>
      </el-col>
    </el-row>
    <!--第四行-->
    <el-row :gutter="10" class="rows">
      <el-col :span="12" class="cols">
        <!--不同性别得分的差异性分析-->
        <div id="avgScoreSex" style="width: 100%; height: 300px;"></div>
      </el-col>
      <el-col :span="12" style="display: flex; align-items: center; height: 300px;" class="cols">
        <div style="width: 100%">
          <el-table border :data="tableData">
            <el-table-column label="性别" prop="sex"></el-table-column>
            <el-table-column label="平均分" prop="avgScore"></el-table-column>
            <el-table-column label="标准差" prop="standard"></el-table-column>
          </el-table>
          <el-descriptions border>
            <el-descriptions-item label="t">{{ tValue }}</el-descriptions-item>
            <el-descriptions-item label="p">{{ pValue }}</el-descriptions-item>
          </el-descriptions>
          <div style="height: 10px"></div>
          <div v-if="pValue>0.05" style="text-align: center">p &gt; 0.05，没有明显的差异性</div>
          <div v-if="pValue<=0.05" style="text-align: center">p &le; 0.05，不同性别对于得分差异性显著</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';

let countOption = {
  title: {
    text: '本月各房屋检查次数'
  },
  xAxis: {
    name: '房间号',
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    name: '检查次数',
    type: 'value',
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'bar',
    label: {
      normal: {
        show: true,
      }
    }
  }]
}

let scoreOption = {
  title: {
    text: '各房屋分数'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    name: '房间号',
  },
  yAxis: {
    name: '分数',
    type: 'value',
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'bar',
    label: {
      normal: {
        show: true,
        formatter: function (params) {
          return params.value.toFixed(2);
        }
      }
    }
  }]
}

let avgScoreTimeOption = {
  title: {
    text: '平均分变化趋势图'
  },
  xAxis: {
    name: '近七次检查',
    nameLocation: 'middle',
    nameGap: 25,
    type: 'category',
    data: [1, 2, 3, 4, 5, 6, 7]
  },
  yAxis: {
    name: '平均分',
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      label: {
        normal: {
          show: true,
          formatter: function (params) {
            return params.value.toFixed(2);
          }
        }
      }
    }
  ]
}

const markLineOpt = {
  animation: false,
  label: {
    formatter: 'y = 0.5 * x + 3',
    align: 'right'
  },
  lineStyle: {
    type: 'solid'
  },
  tooltip: {
    formatter: 'y = 0.5 * x + 3'
  },
  data: [
    [
      {
        coord: [0, 3],
        symbol: 'none'
      },
      {
        coord: [20, 13],
        symbol: 'none'
      }
    ]
  ]
}
let avgScoreFrequencyOption = {
  title: {
    text: '平均分-检查频率',
    top: 0
  },
  tooltip: {
    formatter: function (params) {
      return '(' + params.value[0].toFixed(2) + ', ' + params.value[1].toFixed(2) + ')'
    }
  },
  xAxis: [
    {name: '每月检查次数', nameLocation: 'center', nameGap: '25', gridIndex: 0, max: 20},
  ],
  yAxis: [
    {name: '每月平均分', gridIndex: 0, min: 60, max: 100},
  ],
  series: [
    {
      symbolSize: 20,
      data: [
        [10.0, 8.04],
        [8.07, 6.95],
        [13.0, 7.58],
        [9.05, 8.81],
        [11.0, 8.33],
        [14.0, 7.66],
        [13.4, 6.81],
        [10.0, 6.33],
      ],
      markLine: markLineOpt,
      type: 'scatter'
    }
  ]
}

let avgScoreSexOption = {
  title: {
    text: '不同性别得分的差异性分析(t检验)'
  },
  xAxis: {
    name: '性别',
    type: 'category',
    data: ['男', '女'],
  },
  yAxis: {
    name: '平均分',
    type: 'value',
  },
  series: [{
    data: [50, 50],
    type: 'bar',
    label: {
      normal: {
        show: true,
      }
    }
  }]
}

export default {
  data() {
    return {
      buildingName: '',
      housesCount: 0,
      inspectorTotalCount: 0,
      thisMonthCount: 0,
      countChart: {},
      scoreChart: {},
      avgScoreTimeChart: {},
      pearson: 0,
      avgScoreFrequencyChart: {},
      line: '',
      avgScoreSexChart: {},
      tValue: 0,
      pValue: 0,
      manStandard: 0,
      womanStandard: 0,
      tableData: [],
    }
  },
  mounted() {
    this.loadChart()
    this.getAllData()
  },
  methods: {
    //获取该页面的数据
    getAllData() {
      this.$request.get('/inspection/inspection/getInspectionStatistics').then(res => {
        if (res.code === 200) {
          this.buildingName = res.data.buildingName
          this.housesCount = res.data.housesCount
          this.inspectorTotalCount = res.data.inspectorTotalCount
          this.thisMonthCount = res.data.thisMonthCount
          countOption.xAxis.data = res.data.houseIds
          countOption.series[0].data = res.data.houseInspectionCounts
          scoreOption.xAxis.data = res.data.houseIds
          scoreOption.series[0].data = res.data.scores
          avgScoreTimeOption.series[0].data = res.data.avgScores
          avgScoreFrequencyOption.series[0].data = res.data.avgScoreFrequencyPoints
          this.pearson = res.data.pearson
          // if(this.pearson<0.3){
          //   this.description='每月检查次数和每月房屋平均分之间的Pearson相关系数值为'+this.pearson.toFixed(5)+'，小于0.3，' +
          //       '因而说明 每月检查次数 和 每月房屋平均分 之间并没有相关关系。'
          // }else if(this.pearson<0.7){
          //   this.description='每月检查次数和每月房屋平均分之间的Pearson相关系数值为'+this.pearson.toFixed(5)+'，不小于0.3，大于0.7，' +
          //       '因而说明 每月检查次数 和 每月房屋平均分 之间中度相关。'
          // }else {
          //   this.description='每月检查次数和每月房屋平均分之间的Pearson相关系数值为'+this.pearson.toFixed(5)+'，大于0.7，' +
          //       '因而说明 每月检查次数 和 每月房屋平均分 之间高度相关。'
          // }

          //拟合直线方程
          if (Math.abs(this.pearson) >= 0.3) {
            let a = res.data.line[0]
            let b = res.data.line[1]
            markLineOpt.data[0][0].coord = [0, a]
            if (a + 20 * b <= 100) {
              markLineOpt.data[0][1].coord = [20, a + 20 * b]
            } else {
              markLineOpt.data[0][1].coord = [(100 - a) / b, 100]
            }
            a = a.toFixed(2)
            b = b.toFixed(2)
            markLineOpt.label.formatter = 'y = ' + b + ' * x + ' + a
            markLineOpt.tooltip.formatter = 'y = ' + b + ' * x + ' + a
            this.line = 'y = ' + b + ' * x + ' + a
            avgScoreFrequencyOption.series[0].markLine = markLineOpt
          }

          //不同性别得分的差异性分析
          avgScoreSexOption.series[0].data = res.data.avgScoresBySex.map(item => item.toFixed(2))
          this.tValue = res.data.tValue.toFixed(3)
          this.pValue = res.data.pValue.toFixed(3)
          this.manStandard = res.data.standards[0].toFixed(2)
          this.womanStandard = res.data.standards[1].toFixed(2)
          this.tableData = [
            {'sex': '男', 'avgScore': avgScoreSexOption.series[0].data[0], 'standard': this.manStandard},
            {'sex': '女', 'avgScore': avgScoreSexOption.series[0].data[1], 'standard': this.womanStandard},
          ]

          //更新chart参数
          this.countChart.setOption(countOption)
          this.scoreChart.setOption(scoreOption)
          this.avgScoreTimeChart.setOption(avgScoreTimeOption)
          this.avgScoreSexChart.setOption(avgScoreSexOption)
          this.avgScoreFrequencyChart.setOption(avgScoreFrequencyOption)
        }
      })
    },
    //初始化echarts
    loadChart() {
      //nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用 $nextTick，则可以在回调中获取更新后的 DOM。
      //所以使用v-if后能获取到dom元素了
      // this.$nextTick(() => {
      // this.myChart?.dispose()
      this.countChart = echarts.init(document.getElementById('count'));
      this.scoreChart = echarts.init(document.getElementById('score'));
      this.avgScoreTimeChart = echarts.init(document.getElementById('avgScoreTime'));
      this.avgScoreFrequencyChart = echarts.init(document.getElementById('avgScoreFrequency'));
      this.avgScoreSexChart = echarts.init(document.getElementById('avgScoreSex'))

      this.countChart.setOption(countOption);
      this.scoreChart.setOption(scoreOption);
      this.avgScoreTimeChart.setOption(avgScoreTimeOption);
      this.avgScoreFrequencyChart.setOption(avgScoreFrequencyOption);
      this.avgScoreSexChart.setOption(avgScoreSexOption);
      // })
    },
  }
}
</script>

<style scoped>
.rows {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.cols {
  min-width: 300px;
}

@media (max-width: 700px) {
  .statistic-text, .statistic-icon {
    font-size: 0.9rem;
    font-weight: bold;
  }
}
</style>
